<template>
  <div class="current-progress">
    <div class="current-progress__title">
      <div class="current-progress__left-day">剩余 {{restDays}} 天</div>
      <span>本期佣金统计截止 {{deadDate}}</span>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" :style="`width: ${this.percentage}%`"></div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "current-progress",

    props: [
      'restDays',
      'deadDate',
      'totalDays',
    ],

    computed: {
      percentage() {
        return this.restDays / this.totalDays * 100;
      }
    }
  };
</script>

<style lang="scss" scoped>

  $--progress-height: 26px;

  @include b(current-progress) {
    width: 100%;
    height: 56px;
    margin-top: 20px;
    margin-bottom: 40px;

    @include e(title) {
      display: flex;
      margin-bottom: 6px;
    }
    @include e(left-day) {
      font-weight: bold;
      flex: 1;
    }
    .progress {
      display: flex;
      height: $--progress-height;
      overflow: hidden;
      background-color: #e9ecef;
      border-radius: $--border-radius-base;
    }

    .progress-bar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: $--color-white;
      text-align: center;
      white-space: nowrap;
      background-color: $--color-primary;
      transition: width .6s ease;
      margin: 4px;
    }

    .progress-bar-striped {
      background-image: linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
      background-size: $--progress-height $--progress-height;
    }

    .progress-bar-animated {
      animation: progress-bar-stripes 1s linear infinite;
    }

    @keyframes progress-bar-stripes {
      from {
        background-position: $--progress-height 0;
      }
      to {
        background-position: 0 0;
      }
    }
  }
</style>